<style>
    #oilPrice-add {
        padding: 20px 25px 25px 0;
    }
    #oilPrice-add .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="oilPrice-add">
    <form class="layui-form" action="" lay-filter="dict-add-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动名称：</label>
            <div class="layui-input-block">
                <input type="text" name="activityName" maxlength="50" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动范围：</label>
            <div class="layui-input-block">
                <select name="shellId"
                        lay-verify="required"
                        xm-select-direction="down"
                        xm-select="oilPrice-add-site"
                        xm-select-skin="default"
                >
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">申请人名称：</label>
            <div class="layui-input-block">
                <input type="text" name="applyName" maxlength="50" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间：</label>
            <div class="layui-input-block">
                <input type="text" name="beginTime" id="beginDate" placeholder="开始时间选择" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">结束时间：</label>
            <div class="layui-input-block">
                <input type="text" name="endTime" id="endDate" placeholder="开始时间选择" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动期：</label>
            <div class="layui-input-block">
                <input id="activityCycle" type="number" name="activityDays" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动前影响天数：</label>
            <div class="layui-input-block">
                <input maxlength="50" autocomplete="off" type="number" name="activityBeforeDays" class="layui-input">

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动后影响天数：</label>
            <div class="layui-input-block">
                <input maxlength="50" autocomplete="off"  type="number" name="activityAfterDays" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动周期影响天数：</label>
            <div class="layui-input-block">
                <input maxlength="50" autocomplete="off" type="number" name="activityAllDays" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动说明：</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right;">
                <button lay-submit="" class="layui-btn" lay-filter="dict-add-form-submit" id="submit">保存</button>
                <!--<button lay-submit="" class="layui-btn layui-btn-primary" lay-filter="apply-add-form-submit" id="save">保存且录入数据</button>-->
            </div>
        </div>
    </form>
    <p id="updateTrue" style="display: none;" th:text="${isUpdate}"></p>
</div>

<script>
    layui.use(['jquery', 'febs', 'laydate', 'form', 'layer', 'formSelects'], function () {
        var $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            formSelects = layui.formSelects,
            $view = $('#oilPrice-add'),
            isUpdate = $('#updateTrue').text(),
            siteArr = [],
            $reset = $view.find('#reset'),
            $addForm = $view.find('form');

        form.verify({
            money: function(val, item) {
                if(!val){
                    return '该项不能为空'
                }
            }
        });
        //开始时间
        laydate.render({
            elem: '#beginDate',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            done: function (value, date, endDate) {
                var start = new Date(value), end = $("#endDate").val();
                if (end) {
                    start = new Date(start);
                    end = new  Date(end);
                    var days = end.getTime() - start.getTime();
                    var day = parseInt(days / (1000 * 60 * 60 * 24));
                    $('#activityCycle').val(day)
                }
            }
        });
        //结束时间
        laydate.render({
            elem: '#endDate',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            done: function (value, date, endDate) {
                var end = new Date(value), start = $("#beginDate").val();
                if (end) {
                    start = new Date(start);
                    end = new  Date(end);
                    var days = end.getTime() - start.getTime();
                    var day = parseInt(days / (1000 * 60 * 60 * 24));
                    $('#activityCycle').val(day)
                }
            }
        });
        form.render();

        form.on('submit(dict-add-form-submit)', function (data) {
            //时间格式转化
            data.field.beginTime = new Date(data.field.beginTime);
            data.field.endTime = new Date(data.field.endTime);
            data.field.shellName = siteNameFormatter(data.field.shellId);
            febs.post(ctx + 'shellActivityApply/shellActivityApplyAdd', data.field, function () {
                febs.alert.success('新增成功');
                layer.closeAll();
                $('#febs-apply').find('#query').click();
            });
            return false;
        });
        //保存且录入
        form.on('submit(apply-add-form-submit)', function (data) {
            //时间格式转化
            data.field.beginTime = new Date(data.field.beginTime);
            data.field.endTime = new Date(data.field.endTime);
            data.field.shellName = siteNameFormatter(data.field.shellId);
            febs.post(ctx + 'shellActivityApply/shellActivityApplyAdd', data.field, function () {
                febs.alert.success('新增成功');
                layer.closeAll();
                febs.view.tab.change("/activity/shellActivityContent");
                $('#febs-apply').find('#query').click();
            });
            return false;
        });
        //油站-多选
        formSelects.config('oilPrice-add-site', {
            searchUrl: ctx + 'shellActivity/shellOilList',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].siteName,
                        value: data[i].siteid
                    })
                }
                result.data = tranData;
                siteArr = tranData;
                return result;
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                febs.alert.error('获取油站列表失败');
            }
        });
    //    油站-遍历油站名称
        function siteNameFormatter(data) {
            var _data = data.split(','), str = '';
            $.each(_data, function (index, item) {
                $.each(siteArr, function (i,t) {
                    if (item == t.value) {
                        str += t.name + ','
                    }
                })
            });
            str = str.substring(0,str.length-1);
            return str
        }
    });
</script>